<template>
  <view class="icon-box">
    <view class="icon">
      <image :src="url" mode="aspectFill" @click="changeHead"> </image>
    </view>
    <view class="icon-text">
      <text
        style="font-size: 50rpx; color: #1d2b3a; font-weight: 600"
        @click="changeName"
        >{{ props.name }}</text
      >
      <text
        style="font-size: 30rpx; color: #909090; font-weight: 300"
        @click="changeSex"
        >性别: {{ props.sex }}</text
      >
    </view>

    <uni-popup ref="inputDialog" type="dialog">
      <uni-popup-dialog
        ref="inputClose"
        mode="input"
		v-model="name"
        title="更改用户名"
        placeholder="请输入内容"
        @confirm="confirmName"
      ></uni-popup-dialog>
    </uni-popup>

    <uni-popup ref="sexDialog" type="dialog">
      <view style="width: 300px; background-color: #fff">
        <uni-data-select
          v-model="sexvalue"
          :localdata="sexdata"
          @change="confirmSex"
        ></uni-data-select>
		<button>确定</button>
      </view>
    </uni-popup>
  </view>
</template>

<script setup lang="ts">
import { defineProps } from '@vue/runtime-core';
import { ref } from 'vue';
import { request } from '@/service/request.js';

const props = defineProps({
  name: String,
  sex: String,
  url: String,
});


const name=ref()
const sexvalue = ref();
const sexdata = [
  { value: 0, text: 'Man' },
  { value: 1, text: 'Woman' },
  { value: 2, text: 'Calabai' },
  { value: 3, text: 'Calalai' },
  { value: 4, text: 'Bissu' },
  { value: 5, text: 'Acault' },
  { value: 6, text: 'Travesti' },
  { value: 7, text: 'Questioning' },
  { value: 8, text: 'I don’t use labels' },
  { value: 9, text: 'Declined' },
  { value: 10, text: 'Not listed' },
  { value: 11, text: 'Bissu' },
  { value: 12, text: 'Acault' },
  { value: 13, text: 'Travesti' },
  { value: 14, text: 'Questioning' },
  { value: 15, text: 'I don’t use labels' },
  { value: 16, text: 'Declined' },
  { value: 17, text: 'Not listed' },
];
const inputDialog = ref();
const sexDialog = ref();

const changeName = () => {
  inputDialog.value.open();
  
};

const confirmName =async (name) => {
	console.log(name)
	let res=await request({
		url:'/user/userInfo',
		method:'PUT',
		data:{
			id:uni.getStorageSync('userId'),
			nickname:name
		}
	})
	console.log('222',res)
};

const changeSex = () => {
  sexDialog.value.open();
};
// 此处定义传入的数据
const confirmSex = () => {};
const imgUrl=ref()

const changeHead=async ()=>{
	uni.chooseImage({
	  count: 1, //默认9
	  sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
	  mediaType: ['image'], //文件类型['image', 'video']
	  sourceType: ['album'], //	图片和视频选择的来源['album', 'camera']
	  success: async function (res) {
	    console.log(res.tempFilePaths[0]); //拍照图片的路径
	
	    // const formData = new FormData();
	    //       formData.append('file', res.tempFilePaths[0]);
	    // console.log(222)
	    // let result=await request({
	    //  url:'/upload',
	    //  method:'POST',
	    //  data: formData,
	    // header : {
	    //     'content-type': "multipart/form-data",
	    // 	'Authorization': `Bearer eyJhbGciOiJIUzI1NiJ9.eyJqdGkiOiJkNjJiMzc3OTJjZWI0ODhhOGU4YWM0MzQ0NTQwMzJmNCIsInN1YiI6IjIiLCJpc3MiOiJzZyIsImlhdCI6MTY4NDcwMDcyNywiZXhwIjoxNjg0NzA0MzI3fQ.wjYbVcqFiVcVzwg_zJ5zGQhUvU49kjrNH8RYK2hCtwM`
	    // }	/
	
	    uni.uploadFile({
	      url: 'http://121.199.1.81:8070/upload', //仅为示例，非真实的接口地址
	      filePath: res.tempFilePaths[0],
	      name: 'img',
	      header: {
	        Authorization: `Bearer ${uni.getStorageSync('authorization')}`,
	      },
	      success: (uploadFileRes) => {
	        console.log(uploadFileRes.data);
			  let userInfo = JSON.parse(uploadFileRes.data);
			  if(userInfo.code==420)
			  {
				  uni.showToast({
				  	title: '请重新登陆',
				  	icon: "error"
				  })
				  uni.navigateTo({
				  	url: '/pages/login/login'
				  })
			  }
	        
	        //console.log(userInfo)
	        imgUrl.value = userInfo.data;
	        console.log(imgUrl.value);
	      },
	    });

	    
	  },
	});
	let res=await request({
		url:'/user/userInfo',
		method:'PUT',
		data:{
			avatar:imgUrl.value
		}
	})
	console.log('222',res)
}
</script>

<style>
.icon {
  margin: auto 0rpx auto 25rpx;
  display: flex;
  align-items: center;
  width: 150rpx;
  height: 150rpx;
  box-shadow: 0rpx 20rpx 20rpx rgba(90, 90, 90, 0.1);
  border-radius: 50%;
  overflow: hidden;
}

.icon-text {
  margin-left: 80rpx;
  margin-top: 30rpx;
  display: flex;
  flex-direction: column;
}

.icon-box {
  padding-top: 25rpx;
  padding-bottom: 25rpx;
  margin: 30rpx auto 30rpx 35rpx;
  display: flex;
  flex-direction: row;
  background-color: #ffffff;
  width: 90%;
  /*  height: 200rpx; */
  border: 2rpx solid #e6e6e6;
  box-shadow: 0rpx 16rpx 60rpx rgba(80, 85, 136, 0.06);
  border-radius: 36rpx;
}
</style>
